﻿@using Microsoft.AspNetCore.Components.Forms
@namespace ServiceStack.Blazor.Components.Tailwind
@typeparam Model
@inherits UiComponentBase

<div class="fixed z-20 inset-0 overflow-y-auto" @onclick="onDone">
    <div class="absolute" style=@(TopLeft != null ? $"top:{TopLeft.Value.Y}px;left:{TopLeft.Value.X}px" : "") @onclick:stopPropagation="true">
        <div class="absolute top-0 right-0 bg-white dark:bg-black border dark:border-gray-800 rounded normal-case text-sm shadow w-80">
            <div class="p-4">
                <h3 class="text-base font-medium mb-3 dark:text-gray-100">Sort</h3>
                <div class="flex w-full justify-center">
                    <button type="button" title="Sort Ascending" @onclick="_ => sort(SortOrder.Ascending)"
                            class=@ClassNames(Column.Settings.SortOrder == SortOrder.Ascending ? "bg-indigo-100 dark:bg-indigo-800 border-indigo-500 dark:border-indigo-400" : "bg-white dark:bg-black hover:bg-gray-50 dark:hover:bg-gray-900 border-gray-300 dark:border-gray-700", 
                            "mr-1 inline-flex items-center px-2.5 py-1.5 border shadow-sm text-sm font-medium rounded text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500")>
                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path fill-rule="evenodd" d="M10.082 5.629L9.664 7H8.598l1.789-5.332h1.234L13.402 7h-1.12l-.419-1.371h-1.781zm1.57-.785L11 2.687h-.047l-.652 2.157h1.351z" /><path d="M12.96 14H9.028v-.691l2.579-3.72v-.054H9.098v-.867h3.785v.691l-2.567 3.72v.054h2.645V14zm-8.46-.5a.5.5 0 0 1-1 0V3.707L2.354 4.854a.5.5 0 1 1-.708-.708l2-1.999l.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L4.5 3.707V13.5z" /></g></svg>
                        <span>ASC</span>
                    </button>
                    <button type="button" title="Sort Descending" @onclick="_ => sort(SortOrder.Descending)"
                            class=@ClassNames(Column.Settings.SortOrder == SortOrder.Descending ? "bg-indigo-100 dark:bg-indigo-800 border-indigo-500 dark:border-indigo-400" : "bg-white dark:bg-black hover:bg-gray-50 dark:hover:bg-gray-900 border-gray-300 dark:border-gray-700",
                            "ml-1 inline-flex items-center px-2.5 py-1.5 border shadow-sm text-sm font-medium rounded text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500")>
                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M12.96 7H9.028v-.691l2.579-3.72v-.054H9.098v-.867h3.785v.691l-2.567 3.72v.054h2.645V7z" /><path fill-rule="evenodd" d="M10.082 12.629L9.664 14H8.598l1.789-5.332h1.234L13.402 14h-1.12l-.419-1.371h-1.781zm1.57-.785L11 9.688h-.047l-.652 2.156h1.351z" /><path d="M4.5 2.5a.5.5 0 0 0-1 0v9.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999l.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L4.5 12.293V2.5z" /></g></svg>
                        <span>DESC</span>
                    </button>
                </div>
                <h3 class="text-base font-medium mt-4 mb-2 dark:text-gray-100">
                    Filter
                </h3>
            @if (Column.FieldType.IsEnum)
            {
                <div>
                @foreach (var c in Column.EnumEntries)
                {
                    <div key=@c.Value class="flex items-center">
                        <input type="checkbox" id=@c.Value value=@c.Value 
                               checked=@selectedEnums.Contains(c.Value) @onchange="e => selectedEnumsChanged(c.Value, e.Value is bool b && b)"
                               class="h-4 w-4 border-gray-300 dark:border-gray-700 rounded text-indigo-600 dark:text-indigo-400 focus:ring-indigo-500">
                        <label for=@c.Value class="ml-3">@c.Value</label>
                    </div>
                }
                </div>
            }
            else
            {
                <div>
                    @foreach (var filter in filters)
                    {
                    <div class="mb-2">
                        <span class="inline-flex rounded-full items-center py-0.5 pl-2.5 pr-1 text-sm font-medium bg-indigo-100 dark:bg-indigo-800 text-indigo-700 dark:text-indigo-300">
                            @Column.Name @filter.Name @Column.GetFilterValue(filter)
                                    <button type="button" @onclick="_ => removeFilter(filter)"
                                class="flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-indigo-400 dark:text-indigo-500 hover:bg-indigo-200 dark:hover:bg-indigo-800 hover:text-indigo-500 dark:hover:text-indigo-400 focus:outline-none focus:bg-indigo-500 focus:text-white">
                                <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
                                    <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
                                </svg>
                            </button>
                        </span>
                    </div>
                    }
                    <EditForm Model="NewFilter" class="flex">
                        <InputSelect @bind-Value="NewFilter.Query" class=@CssUtils.Tailwind.Input("w-32 mr-1")>
                        @foreach (var rule in Column.FilterRules)
                        {
                            <option value=@rule.Value>@rule.Name</option>
                        }
                        </InputSelect>
                        @if (newFilterValueType != "none")
                        {
                            <InputText type="text" class=@CssUtils.Tailwind.Input("w-32 mr-1") @bind-Value="NewFilter.Value" @onkeyup="handleKeyUp" />
                        }
                        <div class="pt-1">
                            <button type="button" @onclick="addFilter"
                                class="inline-flex items-center p-1 border border-transparent rounded-full shadow-sm text-white dark:text-black bg-indigo-600 dark:bg-indigo-400 hover:bg-indigo-700 dark:hover:bg-indigo-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
                                </svg>
                            </button>
                        </div>
                    </EditForm>
                </div>
            }
            </div>
            <div class="bg-gray-50 dark:bg-gray-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <PrimaryButton @onclick="onSave" Style="ButtonStyle.Red" class="ml-2">
                    Save
                </PrimaryButton>
                <SecondaryButton @onclick="onDone">
                    Cancel
                </SecondaryButton>
            </div>
        </div>
    </div>
</div>
